<template>
	<view>
		<view class="UCenter-bg">
			<navigator v-if="hasLogin" class="cu-avatar xl round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)" url="userinfo">
				<view class="cu-tag badge" :class="1%2==0?'cuIcon-female bg-pink':'cuIcon-male bg-blue'"></view>
			</navigator>
			<navigator v-else class="cu-avatar xl round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)" url="userinfo">
			</navigator>
			<view class='text-xl' style="font-size: 36upx;">
				<text v-if="hasLogin">{{userInfo.username}}</text>
				<text v-else>请先登录</text>
			</view>
			<!--<view class='padding-top-sm' style="padding-top: 20upx">
				<text v-if="hasLogin">{{userInfo.id}}</text>
				<text v-else></text>
			</view>-->
			<image src='https://api.szyashu.com/static/wave.gif' mode='scaleToFill' class='gif-wave'></image>
		</view>
		<view v-if="hasLogin" class="cu-list menu sm-border card-menu padding-top-xs">
			<navigator url="../index/myorder" class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-form text-lg"/>
					<text class="text-left">我的订单</text>
				</view>				
			</navigator>
			<navigator url="../index/myreceive" class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-form text-lg"/>
					<text class="text-left">我的接单</text>
				</view>				
			</navigator>
		</view>
		<view class="cu-list menu sm-border card-menu padding-top-xs">
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-apps text-lg"/>
					<text class="text-left">当前版本</text>
				</view>
				<view class="action">
					<text>v{{version}}</text>
				</view>
			</view>
			
			<navigator url="about_us" class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-info text-lg"/>
					<text class="text-left">关于我们</text>
				</view>				
			</navigator>
			
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		computed:{
			hasLogin(){
				return this.$store.getters.doneHasLogin;
			},
			userInfo(){
				return this.$store.getters.doneUserInfo;
			}
		},
		methods: {

		}
	}
</script>

<style>
	.UCenter-bg {
	  /* background-image: url('https://api.szyashu.com/static/index.jpg'); */
	  /* background-size: cover; */
	  background-color: #66ccff;
	  height: 400rpx;
	  display: flex;
	  justify-content: center;
	  padding-top: 40rpx;
	  overflow: hidden;
	  position: relative;
	  flex-direction: column;
	  align-items: center;
	  color: #fff;
	  font-weight: 300;
	  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}
	
	.UCenter-bg image {
	  width: 200rpx;
	  height: 200rpx;
	}
	
	.UCenter-bg .gif-wave{
	  position: absolute;
	  width: 100%;
	  bottom: 0;
	  left: 0;
	  z-index: 99;
	  mix-blend-mode: screen;  
	  height: 100rpx;   
	}
</style>
